import { useState, useEffect, useRef, useMemo, useCallback } from 'react'
import WithErrorBoundary from '../../WithErrorBoundary';
import { FrameSty, SectionListSty, SectionSty } from './style'
import { Image } from 'antd';
import downArrow from '@/assets/imgs/downArrow.png'
import StreamerFont from '@/components/StreamerFont'
import StreamerButton from '@/components/StreamerButton'
import useSkip from '@/hooks/useSkip'
import { SkipType } from '@/enum';

function Home() {
  const { skipTo } = useSkip();

  return <FrameSty>
    <SectionListSty>
      <SectionSty id="snapping" className="section" style={{}} >
        <div className="content">
          <StreamerFont text='卸任的博客' />
          <div className='first__hint'>
            <p >向下滚动</p>
            <Image
              width={20}
              src={downArrow}
            />
          </div>
        </div>
      </SectionSty>
      <SectionSty id="scrolling" className="section" >
        <div className="content">
          <StreamerFont text='Function Demo' />
          <div>实现的一些功能demo</div>
          <StreamerButton color='#ee5100' handleClick={() => {
            skipTo(SkipType.FUN)
          }}>
            Enter
          </StreamerButton>
        </div>
      </SectionSty>
      <SectionSty id="layout" className="section">
        <div className="content ">
          <StreamerFont text='ARTICLE' />
          <div>写在掘金上的文章</div>
          <StreamerButton color='#ee5100' handleClick={() => {
            skipTo(SkipType.ARTICLE)
          }}>
            Enter
          </StreamerButton>

          <div style={{
            position: 'absolute',
            bottom: '20px',
          }}>
            <a href='https://beian.miit.gov.cn/' style={{
              color: "#fff"
            }} target='_bank' rel='nofollow'>闽ICP备2021013399号-1</a>
          </div>
        </div>

      </SectionSty>
    </SectionListSty>
  </FrameSty>
}

export default WithErrorBoundary(Home)